import React from 'react';
import QueueAnim from 'rc-queue-anim';
import Texty from 'rc-texty';
import 'rc-texty/assets/index.css';

const dataSource = {
  wrapper: { className: 'banner' },
  textWrapper: {
    className: 'banner-text-wrapper',
    children: [
      {
        name: 'slogan',
        className: 'banner-slogan',
        children: '滴滴网约车车主招募中',
        texty: true,
      },
      {
        name: 'name',
        className: 'banner-name',
        children: <span>限量新车 等您来提</span>,
      },
      { name: 'button', className: 'banner-button', children: '申请成为网约车主' },
    ],
  },
};

class Banner extends React.PureComponent {
  render() {
    const { handleModalVisible, ...currentProps } = this.props;
    // const { dataSource } = currentProps;
    delete currentProps.dataSource;
    delete currentProps.isMobile;
    const children = dataSource.textWrapper.children.map((item) => {
      const { name, texty, ...$item } = item;
      if (name === 'button') {
        return (
          <button key={name} {...$item} onClick={handleModalVisible}>
            {item.children}
          </button>
        );
      }

      return (
        <div key={name} {...$item}>
          {texty ? (
            <Texty type="mask-bottom">{item.children}</Texty>
          ) : (
            item.children
          )}
        </div>
      );
    });
    return (
      <div {...currentProps} {...dataSource.wrapper}>
        <QueueAnim
          key="QueueAnim"
          type={['bottom', 'top']}
          delay={200}
          {...dataSource.textWrapper}
        >
          {children}
        </QueueAnim>
      </div>
    );
  }
}

export default Banner;
